vue中复用组件时出现的数据被覆盖问题~已解决

2023-08-15 14:12| 来源: 网络整理| 查看: 265

vue中复用组件时出现的数据被覆盖的问题~已解决

项目需要，写了一个能够复用的Cascader 组件，偶然间发现了一个久远的bug… 我此时的Cascader 组件并没有加懒加载。

demo复现：在一个页面中放入两个一模一样的组件，第一个组件始终没有数据，然而第二个时有数据展现的：在这里插入图片描述第二个组件明明是有数据的，可偏偏第一个没有；

代码粘上：

{{ data.title }} ({{ data.children.length }}) getTree(){ self.$post('get_company_tree',{id: 1, type:1}).then(res=>{ self.treeListPeople = JSON.parse(JSON.stringify(res.data)); }).catch(err=>{}) },

后来在网上一通的搜啊，大部分说的是使用这种方式解决：

默认按钮主要按钮

试过之后并没有解决我的问题，然后又是一通的搜，路漫漫其修远兮…人生路~ 在网上就根本没有我的这个问题！！！

那一天，天气格外的晴朗，日光透过窗户打在了我消瘦的脸上，就像佛光普照，突然灵光一闪… 大脑一片空白，仿佛有几个字符出现在我的脑海中… this 就是它… 就是它在我脑海中不断出现的就是它—— “this”

…会不会是两个组件共用了一个this导致数据被覆盖了呢，因为我代码中确实写了self，

created () { self = this; },

关键是这一句：

self.treeListPeople = JSON.parse(JSON.stringify(res.data));

把self直接换成this就可以了。

this.treeListPeople = JSON.parse(JSON.stringify(res.data));

终于解决了！哈哈哈，世上无难事，只怕有心人。

原来是因为我加载组件created时把this赋值给了self，所以两个组件共用了一个this，才会出现只有一个组件有数据的问题。在组件中的this指向的是当前组件本身，不能共用，如果想数据共享的话当我没说。所以子组件中重新修改this指向要慎重！！特此记录~

以上是我的个人总结和观点，不对的地方大家指出来，方便共同进步~~

【本文地址】

公司简介

联系我们